<script setup lang='ts'>
  import { ToUserAndRoom, getOSSFile } from '@/utils/public';
  const props = defineProps({
    image:{
      type:String,
      default:''
    },
    user_id:{
      type:[Number,String],
      default:0
    },
    room_id:{
      type:[Number,String],
      default:0
    },
    room_open:{
      type:Number,
      default:0
    },
    /**
     * tabberType
     * 1=魅力榜 2=人气榜 3=公会榜 4=房间榜 5=富豪榜
     */
     tabberType:{
      type:Number,
      default:1
    },
    onGoUserInfo:{
      type:Boolean,
      default:false
    },
  })
  const openinfo = ()=>{
    if(props.tabberType == 5 || props.onGoUserInfo) return
    ToUserAndRoom({
      user_id:props.user_id,
      room_id:props.room_id,
      room_open:props.room_open
    })
  }
</script>

<template>
  <div @click="openinfo" class="portrait" :style="{'--borderRadiusNum':[3,4].indexOf(tabberType) > -1?'8px':'100%'}">
    <div :class="['imgBorder',[3,4].indexOf(tabberType) == -1 && !image ? 'noIcon' : '']">
      <div class="relative">
        <xmimg v-if="image" :src="getOSSFile(image)" class="portraitImg" />
      </div>
    </div>
    <div v-if="room_open == 1 && tabberType != 5 && !onGoUserInfo" class="tips"></div>
  </div>
</template>

<style lang='scss' scoped>
  .portrait {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(--borderRadiusNum);
    .imgBorder {
      overflow: hidden;
      width: 100%;
      height: 100%;
      padding: 1px;
      box-sizing: border-box;
      background: var(--portraitBorderColor);
      border-radius: inherit;
      .relative {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .noIcon {
      width: 100%;
      height: 100%;
      background: var(--noUSerImage) left top / 100% 100% no-repeat;
    }
    .portraitImg {
      position: absolute;
      width: auto;
      min-width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .tips {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0px;
      width: 41px;
      height: 15px;
      background: var(--roomOpenIocnImage) left top / 100% 100% no-repeat;
    }
  }
</style>